<template>
  <el-dialog title="库存流水" :visible.sync="centerDialogVisible" width="70%" center @open="getList"
             @close="closeDialog"
  >
    <div class="page_main">
      <div class="search-box">
        <el-form ref="searchForm" :inline="true" size="mini" :model="searchForm">
          <search-form-box>
            <template slot="showSearch">
              <el-form-item label="物品类型" prop="goods_type_id">
                <el-select v-model="searchForm.goods_type_id" placeholder="请选择物品类型" clearable filterable>
                  <el-option v-for="item in goods_type_arr" :key="item.id" :value="item.id" :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作时间开始：" prop="begin_date">
                <el-date-picker v-model="searchForm.begin_date" type="date"
                                value-format="yyyy-MM-dd"
                                format="yyyy年MM月dd日"
                                placeholder="请输入操作时间开始日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="至：" prop="end_date">
                <el-date-picker v-model="searchForm.end_date" type="date"
                                value-format="yyyy-MM-dd"
                                format="yyyy年MM月dd日"
                                placeholder="请输入操作时间结束日期"
                ></el-date-picker>
              </el-form-item>
            </template>
            <template slot="hideSearch">
              <el-form-item label="操作人：" prop="user_id">
                <el-select v-model="searchForm.user_id" placeholder="请选择操作人" clearable filterable>
                  <el-option v-for="user in user_list" :key="user.id" :label="user.name" :value="user.id"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template slot="searchBtn">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetForm('searchForm')">重置</el-button>
              </el-form-item>
            </template>
          </search-form-box>
        </el-form>
      </div>
      <div class="table-box">
        <el-table v-loading="tableLoading" :data="tableData" size="mini" border style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="good_name" label="物品类型" min-width="200" align="center"></el-table-column>
          <el-table-column label="类型" width="100" align="center">
            <template slot-scope="{row}">
              <el-tag v-if="row.type ===1" size="mini" type="success">入库</el-tag>
              <el-tag v-else type="warning" size="mini">出库</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="change_time" label="操作时间" width="200" align="center"></el-table-column>
          <el-table-column prop="before_change_number" label="操作前库存" width="150" align="center"></el-table-column>
          <el-table-column prop="after_change_number" label="操作后库存" width="150" align="center"></el-table-column>
          <el-table-column label="操作数量" width="150" align="center">
            <template slot-scope="{row}">
              {{ row.type === 1 ? '+' + row.change_number : '-' + row.change_number }}
            </template>
          </el-table-column>
          <el-table-column prop="user_name" label="操作人员" width="150" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="showDetail(row)">查看</el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
      <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10,20,50,100, 200,400]"
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-size.sync="searchForm.page_size" :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
    </span>
    <goods-put-dialog :id="id" ref="goodsPutDialog" readonly append-to-body></goods-put-dialog>
    <goods-out-dialog :id="id" ref="goodsOutDialog" readonly append-to-body></goods-out-dialog>
  </el-dialog>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox/index.vue'
import { list } from '@/api/goods/goods_storage_change_record'
import { list as typeList } from '@/api/goods/goods_type'
import { allList } from '@/api/system/user'
import GoodsPutDialog from '@/views/administration/goods/components/goodsPutDialog.vue'
import GoodsOutDialog from '@/views/administration/goods/components/goodsOutDialog.vue'

export default {
  name: 'goodsStorageChangeRecordDialog',
  components: { GoodsOutDialog, GoodsPutDialog, SearchFormBox },
  data() {
    return {
      centerDialogVisible: false,
      listParams: {
        page: 1,
        page_size: 10,
        goods_type_id: null,
        begin_date: null,
        end_date: null,
        user_id: null
      },
      searchForm: {
        page: 1,
        page_size: 10,
        goods_type_id: null,
        begin_date: null,
        end_date: null,
        user_id: null
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      goods_type_arr: [],
      user_list: [],
      id: -1,
      groupIdRequired: true
    }
  },
  created() {
    this.initGoodsType()
    this.initUserList()
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      this.tableLoading = true
      this.listParams = Object.assign({}, this.searchForm)
      list(this.listParams).then(res => {
        if (res.code === 200) {
          this.tableLoading = false
          this.tableData = res.data.records
          this.total = res.data.total
        }
      }).catch(() => {
        this.tableData = []
        this.tableLoading = false
      })
    },
    search() {
      this.getList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    initGoodsType() {
      typeList().then(res => {
        this.goods_type_arr = res.data
      }).catch(() => {

      })
    },
    show() {
      this.centerDialogVisible = true
    },
    closeDialog() {
      this.searchForm = {
        page: 1,
        page_size: 10,
        goods_type_id: null,
        storage_number_min: null,
        storage_number_max: null
      }
    },
    initUserList() {
      allList().then(res => {
        this.user_list = res.data.filter(user => user.status)
      }).catch(() => {

      })
    },
    showDetail(row) {console.log(row)
      this.id = row.data_id
      if (row.type === 1) {
        this.$refs.goodsPutDialog.show()
      } else {
        this.$refs.goodsOutDialog.show()
      }
    }
  }
}
</script>

<style scoped>
.table-box {
  margin-bottom: 20px;
}

.page_main {
  padding: 20px;
}
</style>
